<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型总尺寸计算方案</title>
		<style>
			.pic1{
				box-sizing: content-box;     /*   默认值  */
				width: 300px;
				padding: 30px;
				border: 20px solid #f00;
				margin: 10px;
			}
			.pic2{
				box-sizing: border-box;     /*   怪异盒子  box-sizing: border-box;  */
				width: 300px;
				padding: 20px;
				border: 20px solid #f00;
				margin: 10px;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 盒子模型方案1：内容盒子（默认的计算方法）-->
		<img src="img/1.jpg" class="pic1">
		<br>
		<!-- 方案2：怪异盒子（边框盒子） -->
		<img src="img/2.jpg" class="pic2">
		
	</body>
</html>